<template>
	<view>
		<s-pull-scroll ref="pullScroll" :pullDown="pullDown" :pullUp="loadData" :back-top="true">
			<view class="content">
				<view class="list">
					<view class="item" v-for="(item, index) in list" :key="index">
						<view class="item-top">
							<view class="item-title items-center justify-between">
								<view>{{item.num}}</view>
								<view class="status-0" v-if="item.status == '0'">空闲</view>
								
								<template v-if="type == '1'">
									<view class="status-1" v-if="item.status == '1'">已插枪</view>
									<view class="status-2" v-if="item.status == '2'">充电中</view>
									<view class="status-3" v-if="item.status == '3'">离线</view>
								</template>
								<template v-else-if="type == '2'">
									<view class="status-1" v-if="item.status == '1'">充电中</view>
									<view class="status-2" v-if="item.status == '2'">离线</view>
								</template>
								
							</view>
							<view class="flex-row items-center justify-between">
								<view class="">
									<view class="item-d">
										<text>车位号：{{item.carportNum}}</text>
										<text style="margin-left: 20rpx;">类型：{{item.type == '0' ? '快充' : '慢充'}}</text>
									</view>
									<view style="padding: 10rpx 0;" v-if="item.cardNum">
										<text class="item-u">物联卡号：{{item.cardNum}}</text>
										<text style="margin-left: 20rpx;" :class="['item-u',{'c_ff6363':item.isEnd==1}]">到期时间：{{item.cardTime}}</text>
									</view>
									<view style="padding: 10rpx 0;" v-if="item.dn">
										<text class="item-u">地锁编号：{{item.dn}}</text>
									</view>
									<view class="item-u" v-if="type == '1'">
										充电速度描述：{{item.chargingSpeed || ''}}
									</view>
								</view>
							</view>
						</view>
						<view class="item-bottom flex-row items-center justify-end">
							<view :class="['btn btn-1',{grayscale:item.cardCheck == '1'}]" @click.stop="handleRenew(item)">
								{{item.cardCheck == '1' ? '续费审核中' : '物联卡续费'}}
							</view>
							<view class="btn" @click.stop="handleEdit(item)">
								编辑
							</view>
						</view>
					</view>
				</view>
			</view>
		</s-pull-scroll>
		<view class="foot">
			<view class="btn" @click="handleAdd">
				添加桩
			</view>
		</view>
		
		<u-popup v-model="show" width="600" mode="center" border-radius="30">
			<view class="popup">
				<view class="title">
					添加充电桩
				</view>
				<view class="input-box">
					<view class="label">
						桩号
					</view>
					<view class="input items-center justify-between">
						<input v-model="form.num" type="text" placeholder="请输入">
						<u-icon size="45" name="scan" @click="handleCode"></u-icon>
					</view>
				</view>
				<view class="input-box" v-if="form.id">
					<view class="label">
						车位号
					</view>
					<view class="input">
						<input v-model="form.carportNum" type="number" maxlength="2" placeholder="请输入">
					</view>
				</view>
				<view class="input-box" v-else>
					<view class="label" style="width: 25%;">
						开始编号
					</view>
					<view class="input">
						<input v-model="form.carportNum" type="number" maxlength="2" placeholder="请输入整数">
					</view>
				</view>
				<view class="input-box" v-if="!form.id">
					<view class="label">
						数量
					</view>
					<view class="input">
						<input v-model="form.name" type="number" maxlength="2" placeholder="请输入整数">
					</view>
				</view>
				<view class="btn" @click="submit">
					保存
				</view>
				<view class="btn btn-1" v-if="form.id" @click="handleDel">
					删除
				</view>
			</view>
		</u-popup>
		<mix-loading v-if="isLoading"></mix-loading>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list:[],
				type:'1',
				show:false,
				id:'',
				form:{}
			};
		},
		onLoad(e) {
			if(e.type) this.type = e.type
			if(e.id) this.id = e.id
			this.refresh();
		},
		methods:{
			handleAdd(){
				console.log(this.type);
				if(this.type == '1'){
					this.navTo('./addpile?type=1&id='+this.id)
				}else{
					this.show = true
					this.form = {}
				}
			},
			handleEdit(item){
				if(this.type == '1'){
					getApp().globalData.pileEditInfo = item
					this.navTo('./addpile?type=2&id='+this.id)
				}else{
					this.form = item
					this.show = true
				}
			},
			pullDown(pullScroll) {
				setTimeout(() => {
					this.loadData(pullScroll);
				}, 200);
			},
			handleCode(){
				uni.scanCode({
					success:(e)=>{
						console.log(e);
						this.form.num = e.result.split('?')[1].split('=')[1].split('-')[0]
						this.$forceUpdate()
					}
				})
			},
			handleDel(){
				uni.showModal({
					content:'是否继续删除?',
					success:(e)=>{
						if(e.confirm){
							this.delFn()
						}
					}
				})
			},
			handleRenew(item){
				if(item.cardCheck == '1') return
				this.navTo(`./renew?num=${item.cardNum}&type=${Number(this.type) - 1}&isType=${item.type}`)
			},
			async delFn(){
				let res = await this.$request('user/zz-del-station-detail-two',{
					uid:uni.getStorageSync('uid'),
					id:this.form.id
				})
				if(res.result == '0'){
					this.$util.msg('删除成功')
					this.refresh()
					this.show = false
				}else{
					this.$util.msg(res.resultNote)
				}
			},
			async loadData(pullScroll) {
				var url = ''
				this.type == '1' ? url = 'user/zz-detail' : url = 'user/zz-detail-two'
				const data = {
					uid: uni.getStorageSync('uid'),
					stationId:this.id,
					pageNo: pullScroll.page,
					pageSize: '10'
				};
				if (pullScroll.page == 1) this.list = [];
				const res = await this.$request(url, data, { showLoading: true });
				if (res.result == 0) {
					this.list = this.list.concat(res.data.list);
					pullScroll.endByPage(Math.ceil(res.data.count / 10), res.data.list);
				} else {
					this.$util.msg(res.resultNote);
				}
			},
			async submit(){
				const { num, carportNum, type } = this.form;
				if (!num) return this.$util.msg('请输入设备编号!')
				if (!carportNum) return this.$util.msg('请输入车位号!')
				let url = ''
				if(this.form.id){
					url = 'user/zz-edit-station-detail-two'
				}else{
					if (!this.form.name) return this.$util.msg('请输入数量!')
					url = 'user/zz-add-station-detail-two'
				}
				let res = await this.$request(url,{
					...this.form,
					stationId:this.id
				},{showLoading: true})
				if(res.result == '0'){
					this.form.id ? this.$util.msg('保存成功') : this.$util.msg('添加成功')
					this.show = false
					this.refresh()
				}else{
					this.$util.msg(res.resultNote)
				}
			}
		},
	}
</script>

<style lang="scss" scoped> 
	.content{
		padding: 20rpx;
		padding-bottom: 250rpx;
		.list{
			.item {
				background: #ffffff;
				border: 1rpx solid rgba(218, 218, 218, 0.18);
				border-radius: 20rpx;
				margin-bottom: 20rpx;
				.item-top {
					padding: 30rpx;
					.item-title {
						font-size: 34rpx;
						font-weight: bold;
						color: #333333;
						border-bottom: 1rpx solid #E7E7E7;
						padding-bottom: 20rpx;
						margin-bottom: 20rpx;
						.status-0{
							color: #BBA101;
						}
						.status-1{
							color: #5A954D;
						}
						.status-2{
							color: #5D7EBB;
						}
						.status-3{
							color: #999999;
						}
					}
					.btn {
						width: 89rpx;
						height: 48rpx;
						text-align: center;
						border-radius: 24px;
						line-height: 48rpx;
						font-size: 26rpx;
						font-weight: 500;
					}
					
					.two {
						background: #246697;
						color: #ffffff;
					}
					.bottom-text {
						font-size: 26rpx;
						font-weight: 500;
						color: #333333;
						margin-left: 24rpx;
					}
					.icon {
						width: 58rpx;
						height: 58rpx;
					}
					.one {
						background: $uni-color-bg;
						color: #FFF;
					}
					.text-1{
						color: $uni-color-bg;
					}
				}
				.item-d {
					font-size: 26rpx;
					font-weight: bold;
					color: #666;
				}
				.item-price {
					font-size: 36rpx;
					font-weight: bold;
					color: #fe642b;
				}
				.p-icon {
					width: 30rpx;
					height: 30rpx;
					margin-right: 10rpx;
				}
				.item-c {
					max-width: 90%;
					display: block;
					font-size: 22rpx;
					font-weight: 500;
					color: #666666;
					word-break: break-all;
				}
				.item-u {
					font-size: 24rpx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #999999;
				}
				.item-bottom {
					border-radius: 0px 0px 20rpx 20rpx;
					padding: 0 30rpx 30rpx;
					.btn{
						width: 170rpx;
						height: 66rpx;
						background: #E4EEFF;
						border: 2rpx solid #446CB2;
						border-radius: 33rpx;
						font-size: 26rpx;
						font-family: PingFang SC;
						font-weight: bold;
						color: #446CB2;
						line-height: 66rpx;
						text-align: center;
					}
					.btn-1{
						width: 191rpx;
						border: 2rpx solid $uni-color-bg;
						background-color: #fff;
						color: $uni-color-bg;
						margin-right: 20rpx;
					}
				}
			}
		}
	}
	.foot{
		position: fixed;
		bottom: 100rpx;
		left: 0;
		z-index: 9999;
		width: 100%;
		.btn{
			width: 640rpx;
			height: 110rpx;
			background: $uni-color-bg;
			border-radius: 55rpx;
			font-size: 32rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			line-height: 110rpx;
			text-align: center;
			margin: 0 auto;
		}
	}
	.popup{
		padding: 30rpx;
		.title{
			font-size: 36rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #333333;
			margin: 30rpx 0 60rpx;
			text-align: center;
		}
		.input-box{
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			.label{
				font-size: 28rpx;
				font-family: PingFang SC;
				font-weight: bold;
				color: #666666;
				line-height: 36rpx;
				width: 20%;
			}
			.input{
				width: 75%;
				background: #F3F3F3;
				border-radius: 16rpx;
				padding: 20rpx;
			}
		}
		.btn{
			width: 500rpx;
			height: 90rpx;
			background: $uni-color-bg;
			border-radius: 45rpx;
			margin: 60rpx auto 0;
			font-size: 30rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #fff;
			line-height: 90rpx;
			text-align: center;
		}
		.btn-1{
			border: 1rpx solid $uni-color-bg;
			background: #fff;
			color: $uni-color-bg;
			margin-top: 20rpx;
		}
	}
	.c_ff6363{
		color: #FF6363 !important;
	}
	.grayscale{
		-webkit-filter: grayscale(100%);
		-moz-filter: grayscale(100%);
		-o-filter: grayscale(100%);
		filter: grayscale(100%);
	}
</style>
